<template>
  <div id="data-view">
    <dv-full-screen-container>

      <top-header />

      <div class="main-content">
        <div class="main-box clearfix">
          <div class="cl-all left">
              <div class="cl-top-box">
                   <div class="cl-top-box-left left">
                     
                    <p class="tl">视力检测数据</p>
                    <div class="cl-top-box-left-top">
                       <p class="messge1">视力正常<br>
                       <span>1520</span> 人</p>
                       <div class="data1-box" style="width:96%;height:80%;top:17%;position: relative;">
                          <dv-scroll-board :rowNum=5 :config="data1Dam" style="width:100%;height:100%;color:#01c4f7;text-align: center;"/>

                        </dv-scroll-board>
                       </div>
                      
                     </div>

                     <div class="cl-top-box-left-bottom">
                         <p class="messge1">视力不良<br>
                         <span>3340</span> 人</p>
                         <div class="data2-box" style="width:96%;height:89%;top:5%;position: relative;">
                            <dv-scroll-board :rowNum=9 :config="data2Dam" style="width:100%;height:100%;color:#01c4f7;text-align: center;"/>
    
                            </dv-scroll-board>
                          </div>
                     </div>

                   </div>

                   <div class="cl-top-box-right left">
                    
                    <div class="change-num-1" v-for="item in centerData" :key="item.title">
                       <div class="icom-img"><img :src="item.img" alt=""></div>
                       <div class="change-num-1-title">{{ item.title }}</div>
                       <div class="digital-flop">
                        <dv-digital-flop
                          :config="item.number"
                          style="width:100px;height:50px;"
                        />
                          <div class="unit">{{ item.unit }}</div>
                      </div>
                     </div>

                     <div class="change-num-2" style="width: 604px;height:605px;">
                         <div class="numbox-1" v-for="item in centerData2" :key="item.title">
                          <div class="numbox-1-title">{{ item.title }}</div>
                          <div class="digital-flop">
                            <dv-digital-flop
                              :config="item.number"
                              style="width:276px;height:80px;"
                            />
                          </div>
                         </div>
                     </div>
                    
                   </div>
              </div>
              <div class="cl-bottom-box">
                 <div class="cl-bottom-top-box left">
                   
                <p class="tl" style="left:8px;">小学生视力不良率趋势</p>
                  <div class="data6-box" style="width:92%;height:92%;top:6%;position: relative;margin: 0px auto;">
                    <dv-charts :option="data6"/>
                  </div>
                 </div>
                 <div class="cl-bottom-bottom-box left">

                  <p class="tl" style="left:8px;">初中生视力不良率趋势</p>
                  <div class="data5-box" style="width:92%;height:92%;top:6%;position: relative;margin: 0px auto;">
                    <dv-charts :option="data5"/>
                  </div>

                 </div>
              </div>
          </div>
          <div class="cr-all right">
            
             <div class="cr-all-top">
            <p class="tl" style="top: 15px;">各班级视力不良率趋势</p>
                <div class="data3-box" style="width:92%;height:82%;top:13%;position: relative;margin: 0px auto;">
                   <dv-scroll-board :rowNum=10 :config="data3Dam" style="width:100%;height:100%;color:#01c4f7;text-align: center;"/>

                 </dv-scroll-board>
                </div>

             </div>
             <div class="cr-all-bottom">
               
            <p class="tl" style="top: 15px;">全校视力构成比</p>
              <div class="data4-box" style="width:92%;height:92%;top:6%;position: relative;margin: 0px auto;">
                <dv-charts :option="data4"/>
              </div>
             </div>
          </div>
        </div>
          
          <!-- <div class="left-common">
            <gai-kuang />
            <xue-sheng />
            <lao-shi />
          </div>

          <div class="body-center">
            <body-center />
            <xiao-yuan />
          </div>

          <div class="left-common">
            <xiaoyuanquanqingkuang />
            <gonggao />
            <zonghe />
          </div>

          <div class="left-common">
            <zujuan />
            <kaoshi />
            <kejian />
          </div>-->
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from '../components/topHeader'
//import gaiKuang from '../components/gaiKuang'
//import xueSheng from '../components/xueSheng'
//import xiaoYuan from '../components/xiaoYuan'
//import laoShi from '../components/laoShi'
//import bodyCenter from '../components/center'
//import xiaoyuanquanqingkuang from '../components/xiaoyuanquanqingkuang'
//import gonggao from '../components/gonggao'
//import zonghe from '../components/zonghe'
//import zujuan from '../components/zujuan'
//import kaoshi from '../components/kaoshi'
//import kejian from '../components/kejian'
export default {
  name: 'DataView',
  components: {
    topHeader,
    //gaiKuang,
    //xueSheng,
    //laoShi,
   // bodyCenter,
   // xiaoYuan,
    //xiaoyuanquanqingkuang,
    //gonggao,
    //zonghe,
   // zujuan,
   // kaoshi,
   // kejian
  },
  data () {
    return {
      data1: [
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1]
      ],
      data1Dam:{},
      data2:[
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1],
        ['石马1', '芮可欣', 5.1]
      ],
      data2Dam:{},
      data3:[
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"],
        ['石马1', 49, "50%"]
      ],
      centerData:[],
      centerData2:[],
      data3header:["班级","人数","视力不良率"],
      data3Dam:{},
      //环形图
      data4:{
        series: [
          {
            type: 'pie',
            data: [
              { name: '轻度视力不良', value: 93 },
              { name: '中度视力不良', value: 66 },
              { name: '高度视力不良', value: 52 },
              { name: '视力正常', value: 34 }
            ],
            radius: ['30%', '40%'],
            insideLabel: {
              show: false
            },
            outsideLabel: {
              labelLineEndLength: 10,
              formatter: '{percent}%\n{name}',
              style: {
                fontSize: 14,
                fill: '#fff'
              }
            }
          }
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
      } ,   
      //折线图
      data5:{
        legend: {
          data: ['设备完好率'],
          textStyle: {
            fill: '#fff'
          }
        },
        xAxis: {
          data: [
            '10/01', '10/02', '10/03', '10/04', '10/05', '10/06',
            '10/07', '10/07', '10/08', '10/09', '10/10', '10/11',
            '10/12', '10/13', '10/14', '10/15'
          ],
          boundaryGap: false,
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          data: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            },
            formatter ({ value }) {
              return value.toFixed(2)
            }
          },
          axisTick: {
            show: false
          },
          min: 95,
          max: 100,
          interval: 0.5
        },
        series: [
          {
            data: [
              99.56, 99.66, 99.84, 99.22, 99.11, 99.45,
              99.44, 99.81, 99.84, 99.32, 99.14, 99.45,
              99.15, 99.45, 99.64, 99.89
            ],
            type: 'line',
            name: '设备完好率',
            smooth: true,
            lineArea: {
              show: true,
              gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
            },
            linePoint: {
              radius: 4,
              style: {
                fill: '#00db95'
              }
            }
          }
        ]
      
      },
      //折线图
      data6:{
        legend: {
          data: ['设备完好率'],
          textStyle: {
            fill: '#fff'
          }
        },
        xAxis: {
          data: [
            '10/01', '10/02', '10/03', '10/04', '10/05', '10/06',
            '10/07', '10/07', '10/08', '10/09', '10/10', '10/11',
            '10/12', '10/13', '10/14', '10/15'
          ],
          boundaryGap: false,
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          data: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            },
            formatter ({ value }) {
              return value.toFixed(2)
            }
          },
          axisTick: {
            show: false
          },
          min: 95,
          max: 100,
          interval: 0.5
        },
        series: [
          {
            data: [
              99.56, 99.66, 99.84, 99.22, 99.11, 99.45,
              99.44, 99.81, 99.84, 99.32, 99.14, 99.45,
              99.15, 99.45, 99.64, 99.89
            ],
            type: 'line',
            name: '设备完好率',
            smooth: true,
            lineArea: {
              show: true,
              gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
            },
            linePoint: {
              radius: 4,
              style: {
                fill: '#00db95'
              }
            }
          }
        ]
      
      },

    }
  },
  mounted(){
    this.data1Dam = {
      data: this.data1, // 表数据
      //header: this.headerdisplacementofDam, // 表头数据
      rowNum: 5, // 表行数
      headerBGC: '#fff', // 表头背景色
      oddRowBGC: '#0b1547', // 奇数行背景色
      evenRowBGC: '#000a3b', // 偶数行背景色
      waitTime: 2000, // 轮播时间间隔(ms)
      align: 'center'
    };
    this.data2Dam = {
      data: this.data2, // 表数据
      //header: this.headerdisplacementofDam, // 表头数据
      rowNum: 9, // 表行数
      headerBGC: '#fff', // 表头背景色
      oddRowBGC: '#0b1547', // 奇数行背景色
      evenRowBGC: '#000a3b', // 偶数行背景色
      waitTime: 2000, // 轮播时间间隔(ms)
      align: 'center'
    }
    this.data3Dam = {
      data: this.data3, // 表数据
      header: this.data3header, // 表头数据
      rowNum:10, // 表行数
      headerBGC: '#021950', // 表头背景色
      oddRowBGC: '#0b1547', // 奇数行背景色
      evenRowBGC: '#000a3b', // 偶数行背景色
      waitTime: 2000, // 轮播时间间隔(ms)
      align: 'center'
    }

    const { createData } = this
    createData()
    setInterval(createData,10000)

    const { createData2 } = this
    createData2()
    setInterval(createData2,10000)

},
  methods: {
    createData () {
      const { randomExtend } = this
      this.centerData = [
        {
          img:require("../assets/img/center1.png"),
          title: '监控总时长',
          number: {
            number: [randomExtend(190, 198)],
            content: '{nt}',
            textAlign: 'left',
            style: {
              fill: 'white'
            }
          },
          unit: '天'
        },
        {
          img:require("../assets/img/center2.png"),
          title: '小学生视力不良率',
          number: {
            number: [randomExtend(190, 198)],
            content: '{nt}',
            textAlign: 'left',
            style: {
              fill: 'white'
            }
          },
          unit: '%'
        },
        {
          img:require("../assets/img/center3.png"),
          title: '初中视力不良率',
          number: {
            number: [randomExtend(190, 198)],
            content: '{nt}',
            textAlign: 'left',
            style: {
              fill: 'white'
            }
          },
          unit: '%'
        },
      ] 
  },

  createData2 () {
      const { randomExtend } = this
      this.centerData2 = [
        {
          title: '全校学生总人数',
          number: {
            number: [randomExtend(4860, 4867)],
            content: '{nt}',
            textAlign: 'center',
            style: {
              fill: 'white',
              fontSize:"74",
              align:"center"
            }
          }
        },
        {
          title: '小学部',
          number: {
            number: [randomExtend(2673, 2674)],
            content: '{nt}',
            textAlign: 'center',
            style: {
              fill: 'white',
              fontSize:"27",
            }
          }
        },
        {
          title: '中学部',
          number: {
            number: [randomExtend(2185,2188)],
            content: '{nt}',
            textAlign: 'center',
            style: {
              fill: 'white',
              fontSize:"27",
            }
          }
        },
      ] 
  },
  randomExtend (minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10)
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
      }
  }

 }
}
</script>

<style lang="less" scoped>
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
}
#dv-full-screen-container{
  background:#000a3b;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding:45px 1%;
  padding-top:0px;
  width:98%;
  height:-webkit-calc(100% - 131px); 
  height:-moz-calc(100% - 131px); 
  height:calc(100% - 131px); 
}
.clearfix{
  clear: both;
}
.left{
  float: left;
}
.right{
  float: right;
}
.main-box{
  width:100%;
  height:100%;
}
.cl-all{
  width:74%;
  height:100%;
}
.cl-top-box{
  width:100%;
  height:677px;
}
.cl-bottom-box{
  width:100%;
  height:280px;
  position:relative;
  top:18px;
}
.cr-all{
  width:26%;
  height:100%;
}
.cr-all-top{
  width:100%;
  height:485px;
  background:url(../assets/img/bg3.png) no-repeat center center;
  background-size: contain;
  position: relative
}
.cr-all-bottom{
  width:100%;
  height:472px;
  position:relative;
  top:18px;
  background:url(../assets/img/bg4.png) no-repeat center center;
  background-size: contain;
}
.cl-bottom-top-box{
  width:-webkit-calc(50% - 18px); 
  width:-moz-calc(50% - 18px); 
  width:calc(50% - 18px); 
  height:100%;
  margin-right:9px;
  position:relative;
  background:url(../assets/img/bg5.png) no-repeat center center;
  background-size: contain;
}
.cl-bottom-bottom-box{
  width:-webkit-calc(50% - 18px); 
  width:-moz-calc(50% - 18px); 
  width:calc(50% - 18px); 
  height:100%;
  margin-left:9px;
  background:url(../assets/img/bg5.png) no-repeat center center;
  background-size: contain;
  position:relative;
}
.cl-top-box-left{
  width:516px;
  height:100%;
  position:relative
}
.cl-top-box-right{
  width:830px;
  height:100%;
  position:relative;
  margin-left:18px;
}
.cl-top-box-left-top{
  width:-webkit-calc(100% - 150px); 
  width:-moz-calc(100% - 150px); 
  width:calc(100% - 150px); 
  height:252px;
  padding-left:150px;
  background:url(../assets/img/bg1.png) no-repeat center center;
  position: relative;
}
.cl-top-box-left-bottom{
  width:-webkit-calc(100% - 150px); 
  width:-moz-calc(100% - 150px); 
  width:calc(100% - 150px); 
  height:386px;
  position:relative;
  top:39px;
  background:url(../assets/img/bg2.png) no-repeat center center;
  padding-left:150px;
}
.messge1{
  font-size:15px;
  color:white;
  position:absolute;
  left:36px;
  top:50%;
  margin-top:-30px;
}
.messge1 span{
  font-size:30px;
  color:#fd9002;
  font-weight: bold;
}
.data3-box .header-item{
  color:white;
}
.change-num-1{
  float: left;
  width:160px;
  padding-top:12px;
  position: relative;
  padding-left:82px;
  margin-left:24px;
  background:url(../assets/img/border.png) no-repeat center center;
  top:28px;
}
.icom-img{
  position: absolute;
  left:16px;
  top:16px;
}
.change-num-1 .dv-digital-flop{
  float: left;
}
.change-num-1 .unit{
  display: block;
    height: 50px;
    line-height: 48px;
    text-align: left;
    /* float: left; */
    position: relative;
    left: -45px;
}
.change-num-1-title{
  color:#02a6cd;
}
.change-num-2{
  width:604px;
  height:605px;
  background:url(../assets/img/yuna.png) no-repeat center center;
  margin:0px auto;
  position:relative;
  top:100px;
}
.change-num-2 .numbox-1{
  font-size:25px;
  text-align: center;
  padding-top:18px;
}
.change-num-2 .numbox-1:first-child {
  text-align: center;
    font-size: 27px;
    position: relative;
    padding-top: 21%;
}
.change-num-2 .numbox-1:first-child .numbox-1-title{
  margin-bottom:38px ;
}
.change-num-2 .numbox-1:first-child+.numbox-1{
  position:relative;
  left:15%;
  float: left;
}
.change-num-2 .numbox-1:last-child{
  position:relative;
  right:7%;
  float: left;
}
.change-num-2 .dv-digital-flop{

}
.change-num-2 .numbox-1:first-child .dv-digital-flop{
  margin:0px auto;
  letter-spacing:22px;
  background:url(../assets/img/k.png) repeat center bottom;
  background-size:100% 100%;
}
.tl{
  position: absolute;
  width:100%;
  text-align: center;
  z-index:1;
  font-size:18px;
  color:#02d9fd;
  top:6px;
}
 

</style>
